import React, { useState } from 'react';
import Image from 'next/image';
import './CommonQuestions.scss';
import FontIcon from '@/components/FontIcon';

function CommonQuestions() {
  const questionList = [
    {
      question: 'How does dropshipping work?',
      answer:
        'It’s really easy. When a customer places an order with a Retailer, the Retailer pays the Supplier for the product. The Supplier then ships the order directly to the Retailer’s customer.',
      expanded: false,
      links: [],
    },
    {
      question: 'What do I need to get started?',
      answer:
        'To get started, you’ll need an active ABN or ACN. We’re all business. It’s nothing personal! You’ll also need to share basic information including your name, phone number and address. For Retailers, we’ll request a link to your online store. For Suppliers, you’ll need to be to able to ship with dropship capability, plus provide a 12-month warranty across your products sold on my-company. We’re keen to see you make ship happen!',
      expanded: false,
      links: [
        {
          link: 'https://web.my-company.net.cn/sell',
          text: 'Become a Retailer',
        },
        {
          link: 'https://web.my-company.net.cn/supply',
          text: 'Become a Supplier',
        },
      ],
    },
    {
      question: 'How much does it cost to sign up?',
      answer:
        "It's free to sign up to my-company. We don’t charge upfront costs, subscription fees, or membership fees.",
      expanded: false,
      links: [
        {
          link: 'https://web.my-company.net.cn/sell',
          text: 'Become a Retailer',
        },
        {
          link: 'https://web.my-company.net.cn/supply',
          text: 'Become a Supplier',
        },
      ],
    },
    {
      question: 'How easy is it to start a dropshipping business?',
      answer:
        'Starting a dropshipping business is as easy as launching an online store. Decide where you want to sell, find suppliers, and then build your online store. Want to learn more?',
      expanded: false,
      links: [
        {
          link: 'https://www.my-company.net.cn/blog/how-to-start-a-dropshipping-business',
          text: 'Read our guide to starting a dropshipping business',
        },
      ],
    },
    {
      question: 'Am I a Retailer or a Supplier?',
      answer:
        'It depends if you’re looking to find products or list your own products. If you’re finding products to sell online, you’re most likely a Retailer. If you want to list products on my-company, you’re most likely a Supplier. If you’re still unsure, contact our team who can help point you in the right direction.',
      expanded: false,
      links: [
        {
          link: 'https://www.my-company.net.cn/contact-us',
          text: 'Contact our team',
        },
      ],
    },
  ];

  const [questions, setQuestions] = useState(questionList);
  const update = () => {
    setQuestions(questions.slice());
  };

  return (
    <div className="common-questions">
      <div className="common-questions-inner">
        <div
          className="image-line"
          style={{
            backgroundImage:
              'url(https://cdn.my-company.net.cn/dstheme/images/production_line_pink_240px.png)',
          }}
        >
          {/* <Image
            src="https://cdn.my-company.net.cn/dstheme/images/production_line_pink_240px.png"
            alt="sell-image"
            width={1492}
            height={120}
          /> */}
        </div>
        <div className="common-questions-main content-width">
          <div className="common-questions-title mb30">
            Frequently asked questions
          </div>
          <div className="common-questions-content">
            {questions.map((question, i) => (
              <div
                className={`question-item ${question.expanded ? 'expanded' : 'collapsed'}`}
                key={i}
              >
                <div
                  className="question-hd flex-row justify-between items-center"
                  onClick={() => {
                    question.expanded = !question.expanded;
                    update();
                  }}
                >
                  <div className="question-title">{question.question}</div>
                  <FontIcon name="expand-line" size={26} />
                </div>
                <div className="question-bd">
                  <div className="answer">{question.answer}</div>
                  {question.links.map((item, i) => (
                    <div className="link" key={i}>
                      <a href={item.link}>{item.text}</a>
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
}

export default CommonQuestions;
